<template>
    <div class="my-book">
      <div class="top-bar">
        <h2>书架</h2>
        <button>福利</button>
        <t-icon name="search" class="icon" />
        <t-icon name="search" class="icon" />
      </div>
      <div class="week-hours">
        <div class="time">本周读2分钟</div>
        <t-row align="center" class="filter-edit">
          <span>筛选</span>
          <t-divider layout="vertical" />
          <span>编辑</span>
        </t-row>
      </div>
      <div class="book-list">
        <div v-for="book in books" :key="book.id" class="book-item">
          <div class="book-cover">
            <img :src="book.cover" alt="Book Cover" class="book-cover" />
          </div>
          <div class="book-info">
            <h3>{{ book.title }}</h3>
            <p>{{ book.readStatus }}</p>
          </div>
        </div>
      </div>
      <nav class="bottom-nav">
        <ul>
          <li><a href="#/shelf">书架</a></li>
          <li><a href="#/bookstore">书城</a></li>
          <li><a href="#/member">会员</a></li>
          <li><a href="#/profile">我的</a></li>
        </ul>
      </nav>
    </div>
  </template>
    
    <script>
  export default {
    name: 'MyBook',
    data() {
      return {
        books: [
          {
            id: 1,
            title: '爱经',
            cover: '/static/img/版权运营7.png',
            readStatus: '已读5.3%'
          },
          {
            id: 1,
            title: '爱经',
            cover: '/static/img/版权运营7.png',
            readStatus: '已读5.3%'
          },
          {
            id: 1,
            title: '爱经',
            cover: '/static/img/版权运营7.png',
            readStatus: '已读5.3%'
          },
          {
            id: 1,
            title: '爱经爱经爱经爱经爱经爱经爱经爱经',
            cover: '/static/img/版权运营7.png',
            readStatus: '已读5.3%'
          },
          {
            id: 1,
            title: '爱经',
            cover: '/static/img/版权运营7.png',
            readStatus: '已读5.3%'
          },
          {
            id: 1,
            title: '爱经',
            cover: '/static/img/版权运营7.png',
            readStatus: '已读5.3%'
          },
          {
            id: 1,
            title: '爱经',
            cover: '/static/img/版权运营7.png',
            readStatus: '已读5.3%'
          },
          {
            id: 1,
            title: '爱经',
            cover: '/static/img/版权运营7.png',
            readStatus: '已读5.3%'
          },
          {
            id: 1,
            title: '爱经',
            cover: '/static/img/版权运营7.png',
            readStatus: '已读5.3%'
          },
          {
            id: 1,
            title: '爱经',
            cover: '/static/img/版权运营7.png',
            readStatus: '已读5.3%'
          },
        ]
      };
    }
  };
    </script>
    
    <style scoped lang="less">
  .my-book {
      padding: 50rem;
    
      .top-bar {
        display: flex;
        align-items: center;
        gap: 34rem;
        padding-bottom: 40rem;
    
        h2 {
          flex: 1;
          font-size: 40rem;
        }
    
        button {
          width: 100rem;
          height: 50rem;
          line-height: 50rem;
          text-align: center;
          display: block;
          font-size: 20rem;
          color: #fff;
          background: linear-gradient(90deg, #2182f8, #6eabf9);
          border: none;
          border-radius: 25rem;
        }
    
        .icon {
          font-size: 40rem;
        }
      }
    
      .week-hours {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 46rem;
        font-size: 24rem;
    
        .time {
          background-color: #f5f5f5;
          height: 54rem;
          line-height: 54rem;
          border-radius: 27rem;
          padding-left: 40rem;
          padding-right: 40rem;
        }
    
        .filter-edit {
          height: 54rem;
          line-height: 54rem;
          display: flex;
          align-items: center;
        }
      }
    }
    
    .book-list {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      padding-left: 50rem;
      padding-bottom: 30rem;
      position: absolute;
      left: 0;
      right: 0;
      top: 200rem;
      overflow-y: auto;
      bottom: 110rem;
      gap: 25rem;  
      .book-item {
        width: 200rem;
    
        .book-cover {
          width: 200rem;
          height: 268rem;
          border-radius: 8rem;
          overflow: hidden;
    
          img {
            width: 200rem;
            display: block;
          }
        }
        .book-info {
          padding-top: 26rem;
          font-size: 26rem;
    
          h3 {
            margin-bottom: 8rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
  
          }
          p {
            font-size: 24rem;
            color: #999;
            padding-bottom: 40rem;
          }
        }
      }
    }
  </style>